<template>
  <div>
    <el-dialog
      v-dialogDrag
      ref="dialog"
      :close-on-click-modal="false"
      :visible.sync="openDetail"
      :before-close="cancel"
      :append-to-body="true"
      title="订单详情"
      width="70%"
      @open="init"
    >
      <!-- 查询条件 -->
      <el-collapse v-model="collapseModel">
        <el-collapse-item title="基础信息" name="1">
          <el-form ref="Form" :model="basicInfo" size="mini" label-width="90px">
            <el-row :gutter="6">
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="客户姓名" prop="userName">
                  <el-input v-model="basicInfo.userName" size="mini" disabled/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="电话" prop="phone">
                  <el-input v-model="basicInfo.phone" size="mini" disabled/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="订单号" prop="orderNo">
                  <el-input v-model="basicInfo.orderNo" size="mini" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="6">
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="订单状态" prop="orderStatus">
                  <!-- <el-input v-model="Info.userName" size="mini" placeholder="" disabled/> -->
                  <r-select v-model="basicInfo.orderStatus" type="9715" disabled/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="订单类型" prop="orderType">
                  <!-- <el-input v-model="Info.userName" size="mini" class="search-input" placeholder="" disabled/> -->
                  <r-select v-model="basicInfo.orderType" type="9714" disabled/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="支付方式" prop="payType">
                  <!-- <el-input v-model="Info.userName" size="mini" class="search-input" placeholder="" disabled/> -->
                  <r-select v-model="basicInfo.payType" type="3222" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="6">
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="订单价格" prop="payAmount">
                  <el-input v-model="basicInfo.payAmount" size="mini" disabled/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="活动编码" prop="activityCode">
                  <el-input v-model="basicInfo.activityCode" size="mini" disabled/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="活动名称" prop="activityPageTheme">
                  <el-input v-model="basicInfo.activityPageTheme" size="mini" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="6">
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="经销商代码" prop="dealerCode">
                  <el-input v-model="basicInfo.dealerCode" size="mini" disabled/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="经销商" prop="dealerName">
                  <el-input v-model="basicInfo.dealerName" size="mini" disabled/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="销售顾问" prop="salesConsultant">
                  <el-input v-model="basicInfo.salesConsultant" size="mini" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="6">
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="订单创建时间" prop="createdAt">
                  <el-date-picker v-model="basicInfo.createdAt" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" disabled/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :md="8">
                <el-form-item label="JY单号" prop="jyNo">
                  <el-input v-model="basicInfo.jyNo" size="mini" disabled/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="车辆信息" name="2">
          <el-table :data="carInfo" height="85">
            <el-table-column prop="SERIES_NAME" label="车系" min-width="50"/>
            <el-table-column prop="CAR_MODEL_CODE" label="车型代码" min-width="230"/>
            <el-table-column prop="CAR_MODEL_DES" label="车型描述" min-width="400"/>
            <el-table-column prop="VIN" label="底盘号" min-width="150"/>
          </el-table>
        </el-collapse-item>
        <el-collapse-item title="订单信息" name="3">
          <el-table :data="orderInfo" height="130">
            <el-table-column type="index" label="序号" min-width="50"/>
            <el-table-column :formatter="filterCode" prop="status" label="订单状态" min-width="300" type="4025"/>
            <el-table-column :formatter="dateFormat" prop="CREATED_AT" label="时间" min-width="500"/>
          </el-table>
        </el-collapse-item>
        <el-collapse-item title="物流信息" name="4">
          <el-table :data="logisticsInfo" :default-sort = "{prop: 'nodeTime', order: 'descending'}" height="200">
            <el-table-column type="index" label="序号" min-width="50"/>
            <el-table-column prop="nodeName" label="物流节点" min-width="300"/>
            <el-table-column prop="nodeTime" label="时间" min-width="500"/>
          </el-table>
        </el-collapse-item>
      </el-collapse>

      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button type="text">
          <i class="el-icon-search magnifier" />
        </el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOrderStatus, getOrderLogistics } from '@/api/commodity/orderManage/orderMaintenance.js'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import rSelect from '@/components/Select/Select'
import filtercode from '@/components/Checkbox/filtercode'

export default {
  name: 'SelectDealer',
  components: {
    rSelect,
    BaseTable,
    filtercode
  },
  mixins: [formMixins],
  props: {
    openDetail: {
      type: Boolean,
      default: false
    },
    basic: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {}
    },
    car: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: []
    }
  },
  data() {
    return {
      collapseModel: ['1', '2', '3', '4'],
      basicInfo: {
        userName: '',
        phone: '',
        orderNo: '',
        orderStatus: '',
        payAmount: '',
        activityPageTheme: '',
        activityCode: '',
        orderType: '',
        payType: '',
        dealerCode: '',
        dealerName: '',
        salesConsultant: '',
        createdAt: ''
      },
      carInfo: [],
      orderInfo: [],
      logisticsInfo: []
    }
  },
  mounted() {
  },
  methods: {
    init() {
      getOrderStatus(this.basic.orderId).then(res => {
        this.orderInfo = res
      })
      getOrderLogistics(this.basic).then(res => {
        this.logisticsInfo = res
      })
      this.basicInfo = this.basic
      this.carInfo = this.car
    },

    cancel() {
      this.basicInfo = {
        userName: '',
        phone: '',
        orderNo: '',
        orderStatus: '',
        payAmount: '',
        activityPageTheme: '',
        activityCode: '',
        orderType: '',
        payType: '',
        dealerCode: '',
        dealerName: '',
        salesConsultant: '',
        createdAt: ''
      }
      this.carInfo = []
      this.orderInfo = []
      this.logisticsInfo = []
      this.$emit('update:openDetail', false)
    }

  }
}
</script>

<style scoped>
</style>
